﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title></title>
<meta name="keywords" content="Monica" />
<meta name="description" content="Monica is so beatuiful" />
<meta name="author" content="Allan" />
<meta name="copyright" content="copyright @ Allan" />
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<style>
    #music_topic{
        position: fixed;
        /* left: 62px; */
        top: 0;
        padding: 5px;
        z-index: 99999;
        margin: 3px auto;
        border-: blue;
        text-shadow: 2px 4px 8px #0084f5;
        /* color: black; */
        /* background-color: hsl(332, 26%, 85%); */
        box-shadow: 0px 0px black;
    }
    /* 动画效果 */
    #music_topic{
        -webkit-animation: free_download 1s linear alternate infinite;
        animation: free_download 1s linear alternate infinite;
    }
    @-webkit-keyframes free_download{
        0%{-webkit-transform:scale(0.9);}
        100%{-webkit-transform:scale(1);}
    }
    @keyframes free_download{
        0%{transform:scale(0.9);}
        100%{transform:scale(1);}
    }

    #audio_btn {
        position: fixed;
        right: 8px;
        top: 0;
        z-index: 200;
        display: none;
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .play_yinfu {
        position: fixed;
        right: 10px;
        float: right;
        top: 1px;
        width: 30px;
        height: 30px;
        background-image: url("/static/images/music.gif");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 60px 60px;
    }

    .rotate {
        position: fixed;
        right: 10px;
        float: right;
        top: 1px;
        width: 30px;
        height: 30px;
        background-size: 100% 100%;
        background-image: url("/static/images/music_off.png");
        -webkit-animation: rotating 1.2s linear infinite;
        -moz-animation: rotating 1.2s linear infinite;
        -o-animation: rotating 1.2s linear infinite;
        animation: rotating 1.2s linear infinite;
    }


    @-webkit-keyframes rotating {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes rotating {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    @-moz-keyframes rotating {
        from {
            -moz-transform: rotate(0deg);
        }
        to {
            -moz-transform: rotate(360deg);
        }
    }

    .off {
        position: fixed;
        right: 10px;
        float: right;
        top: 1px;
        background-size: 100% 100%;
        background-image: url("/static/images/music_no.png");
        background-repeat: no-repeat;
        background-position: center center;
    }

</style>
</head>
<body>
<canvas id="c"></canvas>
<!--音乐-->
<div id="music_topic" ></div>
<div class="video_exist play_yinfu" id="audio_btn" style="display: block;z-index:999999;">
    <div id="yinfu" class="rotate"></div>
    <audio preload="auto" autoplay="autoplay" id="media" onended="replayAudio();replayAudio();console.log('播放完毕');" src="/static/resource/love_is_so_sweet.mp3" loop="loop"></audio>
</div>
<!--气泡文字信息可在以下js文件中修改-->
<script type="text/javascript" src="/static/jquery-validation/lib/jquery-1.11.1.js"></script>
<script type="text/javascript" src="/static/js/index.js?_t={:time()}"></script>
<script type="text/javascript">
    let arrayUrl = [
        '/static/resource/陪着你走.mp3',
        '/static/resource/just_the_way_you_are.mp3',
        '/static/resource/分分钟需要你.mp3',
        '/static/resource/to_you_to_me.mp3',
    ],arrayTopic = [
        'Happy birthday to you,Monica~ ',
        'Just the way you are!',
        '生日快乐，马小姐',
        '너에게 난, 나에게 넌',
    ];
    let length = arrayUrl.length - 1;
    function audioAutoPlay(id) {
        var audio = document.getElementById(id);
        /*audio.play();*/
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);

    }
    $("#audio_btn").bind('click', function() {
        let audio = $('#media');
        let index = 0;
        $(this).hasClass("off") ? (
            index = randomNum(0,length),
                audio.attr('src',arrayUrl[index]),
                $('#music_topic').html(arrayTopic[index]),
                $(this).addClass("play_yinfu").removeClass("off"),
                $("#yinfu").addClass("rotate"),
                audio[0].play()
        ) : (
            $(this).addClass("off").removeClass("play_yinfu"),
                $("#yinfu").removeClass("rotate"),
                audio[0].pause()
        );
    });

    audioAutoPlay('media');
    function replayAudio(){
        $("#audio_btn").click();
    }
    $(document).ready(function() {

        /*var index = randomNum(0,length);
        var url = arrayUrl[index];
        audio.attr('src',url);
        $('#music_topic').html(arrayTopic[index]);
        audio[0].play();*/
        replayAudio();
        setTimeout("replayAudio()",3000);
    });

    /**
     * 生成从minNum到maxNum的随机数
     * @param minNum
     * @param maxNum
     * @returns {number}
     */
    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }
</script>
</body>
</html>